<template>
	<view class="content">
		<!-- <z-paging ref="paging" v-model="MessageList" @query="queryList" :auto-hide-loading-after-first-loaded="false"> -->
		<z-paging ref="paging" use-virtual-list cell-height-mode="dynamic" use-cache cache-key="MessageList"
			@query="queryList" auto-show-back-to-top :back-to-top-style="{ 'opacity':0.6 }">
			<template #top>
				<u-navbar class="navbar" :fixed="false" title="消息" :autoBack="navLeftIcon"
					:leftIcon="navLeftIcon ? 'arrow-left' : ''" :safeAreaInsetTop="true" style="width: 100%;"
					leftIconColor="#fff">
					<view slot="right">
						<u-icon name="setting-fill" color="#fff" size="20" @click="openMsgSetting"></u-icon>
					</view>
				</u-navbar>
			</template>

			<template #loading>
				<view style="padding: 20rpx;">
					<m-skeleton v-for="i in 5" :key="i" style="margin-bottom: 20rpx;"></m-skeleton>
				</view>
			</template>


			<template #cell="{item,index}" style="padding: 10px;">
				<view class="CardBox" @click="ToInfoByMsgType(item)">
					<view class="CardBox-top">
						<view class="CardBox-top_left">
							<!-- 序号 -->
							<!-- <view class="CardBox-top_left_ordinal animate">{{index+1}}</view> -->

							<!-- 标题 -->
							<view class="CardBox-top_left_title animate">{{item.ModuleName}}</view>
						</view>

						<view class="CardBox-top_right">
							<!-- 时间 -->
							<view class="CardBox-top_right_title animate">{{item.SendDate | timeFormat}}</view>
						</view>
					</view>

					<view class="CardBox_second animate">{{item.MSGContent}}</view>

					<view class="CardBox_content animate">{{item.MSGSubject}}</view>

					<view class="CardBox_bottom">
						<view>发起人：{{item.Sender}}</view>
						<!-- <view>已读</view> -->
					</view>
				</view>
			</template>
		</z-paging>


		<!-- 消息设置 -->
		<uni-popup ref="settingPopup" background-color="#fff" borderRadius="20px 20px 20px 20px">
			<view class="f-dc" style="height: 300px;width: 80vw;overflow: hidden;border-radius: 20px;">

				<u-navbar :fixed="false" title="消息设置" leftIcon=" " :safeAreaInsetTop="false" style="width: 100%;">
					<view slot="right">
						<u-icon name="close" color="#fff" size="20" @click="closeMsgSetting"></u-icon>
					</view>
				</u-navbar>

				<u-cell-group class="msgSetContent" :customStyle="{backgroundColor: '#f6f6f6'}"
					style="flex: 1;overflow: auto;">
					<u-cell title="消息提示按钮" :titleStyle="{fontSize:'24rpx'}" style="background-color: #fff;">
						<view slot="value">
							<switch :checked="BtnType" @change="changeType" color="#51d0d0"
								style="transform:scale(0.7)" />
						</view>
					</u-cell>
				</u-cell-group>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	// 每次进入，存储一遍进入的时间，下次获取数据时，该时间后的为未读消息。
	var vm;
	export default {
		data() {
			return {
				navLeftIcon: false,
				MessageList: [], // 消息列表 
			}
		},
		onLoad(option) {
			let that = this;
			if (option.nav) {
				this.navLeftIcon = true;
			}

		},
		created() {
			let that = this;
			vm = that;

		},
		computed: {
			BtnType() { // 是否打开消息按钮
				return this.$store.state.openMsgBtnType == 'true'
			},
		},
		filters: {
			timeFormat(val) {
				return vm.$utils.dateFormat(val, 'Y-MM-dd hh:mm:ss');
			}
		},
		mounted() {
			let that = this;

			// 点击底栏消息，刷新页面
			uni.$on('msgReload', function(data) {
				// console.log(data)
				if (data.status == 'reload') {
					// that.$nextTick(() => {
					vm.refresh();
					// })
				}
			})
		},
		onUnload() { // 监听页面卸载, 
			uni.$off('msgReload')
		},
		methods: {
			ToInfoByMsgType(data) {

				const queryString = data.Url;
				const params = queryString.split('&').reduce((acc, current) => {
					const [key, value] = current.split('=');
					acc[key] = decodeURIComponent(value); // 解码URL编码的字符  
					return acc;
				}, {});

				console.log(params)

				let returnData = {
					detailTitle: params.objName,
					detailName: params.objName,
					keyName: params.keyName,
					keyValue: params.keyValue,
					dataInfo: {
						titleColName: '',
						showColumnsInfo: [],
						tagColumnsInfo: [],
					}
				}

				vm.$store.commit('ChangeAndSetStateData', {
					Name1: 'MenuDetail',
					data: returnData
				});

				uni.navigateTo({
					url: '/commonPage/Form/Edit',
					success() {
						// that.lastCallCom = 0;
					}
				})


			},
			changeType(data) {

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'openMsgBtnType',
					data: String(data.detail.value),
					StorageName: 'openMsgBtnType',
					StorageData: String(data.detail.value),
				});
			},
			closeMsgSetting() { // 关闭消息设置弹层
				let that = this;

				that.$refs.settingPopup.close();

			},
			openMsgSetting() { // 打开消息设置弹层
				let that = this;

				that.$refs.settingPopup.open();
			},


			refresh() { // 搜索
				this.$refs.paging.reload()
			},
			queryList() {
				let that = this;

				try {
					that.$store.dispatch('GetMessageInfo').then(ret => {
						if (ret.status == 200) {
							// that.$refs.paging.complete(ret.data.ds);
							// 过滤普通的推送消息
							let filterData = ret.data.ds.filter(item => item.MSGType == 1);

							that.$refs.paging.setLocalPaging(filterData);
							that.$forceUpdate();
							// setTimeout(() => {}, 50)
						} else {
							that.$refs.paging.complete([]);
						}
					}).catch((err) => {
						console.log(err)
						that.$refs.paging.complete(false);
					})
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	$h-padding: 15rpx;
	$v-padding: 20rpx;
	$radius: 10rpx;

	// 设置列表盒子的样式
	/deep/.zp-list-container {
		padding: 20rpx !important;
	}

	.content {
		background-color: #f0f1f5;
		// height: 80vh;
		background-color: #f6f6f6;
		// padding: calc(50px + env(safe-area-inset-top)) $h-padding 0;
	}

	.u-cell__body {
		padding: 20rpx;
	}

	.SearchBox {
		background-color: #fff;
		background-color: #51d0d0;
		padding: 16rpx 28px;

		.MenuText {
			font-size: 14px;
			border-right: 1px solid #999;
			padding-right: 10px;
			margin-right: 4px;
		}
	}


	.CardBox {
		position: relative;
		border-radius: 16rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		&-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			&_left {
				display: flex;
				align-items: center;
				// font-size: 28rpx;
				font-size: 14px;

				// 序号
				&_ordinal {
					background-color: #51d0d0;
					color: #fff;
					width: fit-content;
					min-width: 34rpx;
					border-radius: 8rpx;
					text-align: center;
				}

				&_title {

					width: fit-content;
					border-radius: 999rpx;
					margin-left: 10rpx;
				}
			}

			&_right {

				&_title {
					// font-size: 24rpx;
					font-size: 12px;
					color: #999;
					width: fit-content;
					border-radius: 999rpx;
				}
			}
		}

		&_second {
			color: #535353;
			min-height: 28rpx;
			border-radius: 999rpx;
			// margin-bottom: 10rpx;
			// font-size: 24rpx;
			font-size: 12px;
			padding: 10rpx;
			text-indent: 2em;
			text-align: justify;
			word-spacing: normal;
			letter-spacing: normal;
			line-height: 1.5;
		}

		&_content {
			color: #535353;
			// height: 100rpx;
			// min-height: 80rpx;
			border-radius: 8rpx;
			// font-size: 24rpx;
			font-size: 12px;
			padding: 10rpx;
			text-indent: 2em;
			text-align: justify;
			word-spacing: normal;
			letter-spacing: normal;
		}

		&_bottom {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			flex-direction: column;
			align-items: flex-end;
			color: #999;
			// font-size: 22rpx;
			font-size: 11px;

			&:first-child {
				margin-bottom: 10rpx;
			}
		}

	}
</style>